<template>
  <section class="main">
    <a-card :bordered="false" title="血压曲线">
      <template slot="extra">
        <a-button
          v-for="item in duringTime"
          :key="item.value"
          :type="queryParam.period == item.value ? 'danger' : ''"
          :style="{ marginLeft: '7px' }"
          @click="loadData(item.value)"
          >{{ item.text }}</a-button
        >
      </template>
      <template v-if="charts.axisData.length > 0">
        <line-charts
          :key="initCharts"
          :x-axis-data="charts.axisData"
          :y-axis-unit="charts.axisUnit"
          :visual-map="charts.visualMap"
          :legend="charts.legend"
          :show-legend-arr="charts.showLegend"
          :series-data="charts.seriesData"
          :add-line="true"
          :line-style="charts.lineStyle"
          :add-area="true"
          :area-style="charts.areaStyle"
        />
      </template>
      <template v-else>
        <div class="no-data"><a-icon type="frown-o" />暂无数据</div>
      </template>
    </a-card>

    <!-- <a-card style="margin-top: 24px" :bordered="false" title="血压统计">
      <template slot="extra">
        <a-button
          v-for="item in duringTime"
          :key="item.value"
          :type="queryParam.period == item.value ? 'danger' : ''"
          :style="{ marginLeft: '7px' }"
          @click="loadData(item.value)"
          >{{ item.text }}</a-button
        >
      </template>
      <div class="no-data"><a-icon type="frown-o" />暂无数据</div>
    </a-card> -->

    <a-card style="margin-top: 24px" :bordered="false" title="血压列表">
      <template slot="extra">
        <a-button
          v-for="item in duringTime"
          :key="item.value"
          :type="queryParam.period == item.value ? 'danger' : ''"
          :style="{ marginLeft: '7px' }"
          @click="loadData(item.value)"
          >{{ item.text }}</a-button
        >
      </template>
      <div style="margin-bottom: 20px; display: flex; justify-content: flex-end">
        <a-button type="primary" @click="handleAdd">添加</a-button>
      </div>
      <template v-if="listDataSource.length > 0">
        <a-table
          ref="table"
          bordered
          size="middle"
          rowKey="id"
          :columns="listColumns"
          :dataSource="listDataSource"
          :pagination="ipagination"
          :loading="listDataLoading"
          @change="
            (pagination, filters, sorter, currentDataSource) =>
              handleTableChange(pagination, filters, sorter, currentDataSource, 'getList')
          "
        >
          <template slot="type" slot-scope="text, record">
            <span>{{ record.recordType == 1 ? '晨起' : record.recordType == 2 ? '睡前' : '随机' }}</span>
          </template>
        </a-table>
      </template>
      <template v-else>
        <div class="no-data"><a-icon type="frown-o" />暂无数据</div>
      </template>

      <blood-pressure-modal ref="modalForm" @ok="modalFormOk"></blood-pressure-modal>
    </a-card>
  </section>
</template>

<script>
import { BloodProfileMixin } from '@/mixins/BloodProfileMixin'
import LineCharts from '@/views/bloodProfile/components/LineChart'
import { PAGE_MENU_TYPE } from '@/store/mutation-types'
import BloodPressureModal from './modules/BloodPressureModal'

export default {
  name: 'BloodPressure',
  mixins: [BloodProfileMixin],
  components: { VeLine, LineCharts, BloodPressureModal },
  data() {
    const lowHighRenderContent = (value, row, index, field) => {
      let element = ''
      if (value) {
        if (row[field] && row[field] == 1) {
          element = (
            <span style="font-weight:bold; color: red">
              {value} <img src="../up.png" />
            </span>
          )
        } else if (row[field] && row[field] == 3) {
          element = (
            <span style="font-weight:bold; color: red">
              {value} <img src="../down.png" />
            </span>
          )
        } else {
          element = <span>{value}</span>
        }
      } else if (value == null) {
        element = <h3>-</h3>
      }

      const obj = {
        children: element, // 这是渲染列的值，支持渲染html
        attrs: {} // 属性有colSpan和 rowSpan， colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。设置的值为多少代表合并的行列为多少
      }
      return obj
    }
    return {
      initCharts: 'init',
      queryParam: { patientId: this.$route.query[PAGE_MENU_TYPE.PatientId], type: 3, period: 0 },
      listColumns: [
        {
          title: '日期/监测项',
          align: 'center',
          dataIndex: 'time',
          width: 120
        },
        {
          title: '晨起/睡前/随机',
          align: 'center',
          dataIndex: 'type',
          width: 120,
          scopedSlots: { customRender: 'type' }
        },
        {
          title: '收缩压',
          align: 'center',
          dataIndex: 'high',
          width: 120,
          customRender: (value, row, index) => lowHighRenderContent(value, row, index, 'highStatus')
        },
        {
          title: '舒张压',
          align: 'center',
          dataIndex: 'low',
          width: 120,
          customRender: (value, row, index) => lowHighRenderContent(value, row, index, 'lowStatus')
        },
        {
          title: '心率',
          align: 'center',
          dataIndex: 'heart',
          width: 120
        }
        // {
        //   title: '晨起收缩压',
        //   align: "center",
        //   dataIndex: 'high',
        //   width: 120
        // },
        // {
        //   title: '晨起舒张压',
        //   align: "center",
        //   dataIndex: 'low',
        //   width: 120
        // },
        // {
        //   title: '晨起心率',
        //   align: "center",
        //   dataIndex: 'pluse',
        //   width: 120
        // },
        // {
        //   title: '睡前收缩压',
        //   align: "center",
        //   dataIndex: 'high',
        //   width: 120
        // },
        // {
        //   title: '睡前舒张压',
        //   align: "center",
        //   dataIndex: 'low',
        //   width: 120
        // },
        // {
        //   title: '睡前心率',
        //   align: "center",
        //   dataIndex: 'pluse',
        //   width: 120
        // }
      ],
      charts: {
        visualMap: {
          top: 0,
          right: 30,
          align: 'left',
          orient: 'horizontal',
          precision: 1,
          pieces: [
            {
              gt: 40,
              lte: 60,
              color: '#e88327'
            },
            {
              gt: 60,
              lte: 140,
              color: '#00d570'
            },
            {
              gt: 140,
              color: '#fb0b0a'
            }
          ],
          outOfRange: {
            color: '#999'
          }
        },
        axisData: [],
        axisUnit: ' mmHg',
        legend: [
          // "晨起收缩压",
          // "晨起舒张压",
          // "晨起心率",
          // "睡前收缩压",
          // "睡前舒张压",
          // "睡前心率"
          '收缩压',
          '舒张压',
          '心率'
        ],
        showLegend: [],
        seriesData: [],
        lineStyle: [
          {
            index: 0,
            lineColor: '#f06980',
            textColor: '#4d4d4d',
            data: [60, 140]
          }
        ],
        areaStyle: {
          color: '#F2F2F2',
          data: [60, 140]
        }
      },
      url: {
        // 根据时段与时间周期查询血压记录
        getCharts: '/101/05/1010501',
        // 按日期分组获取患者血压记录
        getList: '/101/05/1010502',
        // 查询血压统计数据 按照血压记录类别进行统计
        getStatisics: '/101/05/1010503'
      }
    }
  }
}
</script>

<style lang="less" scoped>
.no-data {
  color: rgba(0, 0, 0, 0.25);
  text-align: center;
  line-height: 64px;
  font-size: 16px;

  i {
    font-size: 24px;
    margin-right: 16px;
    position: relative;
    top: 3px;
  }
}
</style>

